
<template>



    <el-menu-item :index="resolve" v-if="!props.item.children">
        <el-icon v-if="props.item?.meta?.icon">
            <component :is="props.item.meta.icon"></component>
        </el-icon>
      <template #title>{{ props.item.meta.title }}</template>
     
        <!-- <el-icon v-if="props.item?.meta?.icon.length>0"  >
                <Plus />
            </el-icon> -->
        

    </el-menu-item>
    <el-sub-menu :index="resolve" v-if="props.item.children">
        <template #title>
            <el-icon v-if="props.item.meta.icon.length>0"  >
                <component :is="props.item.meta.icon"></component>
                <!-- <template v-html="`<${props.item.meta.icon}/>`"></template> -->
                <!-- <Plus /> -->
            </el-icon>
            <!-- {{`<${props.item.meta.icon}/>`}} -->
            <!-- <el-icon v-if="props.item.meta.icon.length" size="20" v-html="`<${props.item.meta.icon}`"></el-icon> -->
            <span>{{ props.item.meta.title }}</span>
        </template>
        <Tree :item="item2" v-for="item2 in props.item.children" :resolve="resolve"></Tree>
    </el-sub-menu>



</template>

<script setup>
import { computed } from 'vue';
const props = defineProps(['item', "resolve"]);
const resolve = computed(() => {
    return (props.resolve + '/' + props.item.path).replace('///', '/').replace('//', '/')
})

</script>
<script>
export default {
    name: "Tree"
}
</script>
<style lang="scss" scoped>

</style>